<template>
  <div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
// 引入相关的依赖
// import BpmnViewer from 'bpmn-js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
// 原有的 properties-panel 这个框
import propertiesPanelModule from 'bpmn-js-properties-panel'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
// import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; // 而这个引入的是右侧属性栏里的内容
import propertiesProviderModule from './properties-panel-extension/provider/authority'// 自定义的 properties-panel内容
import authorityModdleDescriptor from './properties-panel-extension/descriptors/authority'
import magicModdleDescriptor from './properties-panel-extension/descriptors/magic.json';
import { xmlStr } from './mock/xmlStr'
import zhCN from "./customTranslate";// 中文

export default {
  components: {},
  created() { },
  mounted() {
    this.init()
  },
  data() {
    return {
      bpmnModeler: null,
    }
  },
  methods: {
    init() {
      this.bpmnModeler = new BpmnModeler({
        container: this.$refs.canvas,
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          propertiesPanelModule, // 右边的工具栏(固定引入)
          propertiesProviderModule,// 自定义右边工作栏的内容
          { translate: ["value", zhCN] }, // 中文

        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
          authority: authorityModdleDescriptor,
          magic: magicModdleDescriptor

        }
      })
      this.createNewDiagram()
    },
    createNewDiagram() {
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(xmlStr, err => {
        if (err) {
          // console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success()
          this.bpmnEvent()
        }
      })
    },
    //注册节点事件，可以写多个事件
    bpmnEvent() {
      const eventBus = this.bpmnModeler.get("eventBus");
      eventBus.on(["element.click", 'element.changed'], (e) => {
        const { element, type } = e;
        // console.log(eventType, element);
        if (!e || !element || !element.parent || element.type === "bpmn:Process") return; //这里我的根元素是bpmn:Process
        if (type === "element.click") {
          console.log(element);
          // this.changeColor(element)
          // this.overlays(element)
          // this.changeAttrs(element)
        } else if (type === "element.hover") {
          // 鼠标滑过节点后想要做的处理
          // console.log("鼠标经过节点啦~");
        } else if (type === "element.changed") {
          console.log('元素改变触发');
        }
      });
    },
    success() {
      // 给图绑定事件，当图有发生改变就会触发这个事件
      const that = this
      this.bpmnModeler.on('commandStack.changed', function () {
        that.saveDiagram(function (err, xml) {
          console.log(xml)
        })
      })
    },
    // 下载为bpmn格式,done是个函数，调用的时候传入的
    saveDiagram(done) {
      // 把传入的done再传给bpmn原型的saveXML函数调用
      this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
        done(err, xml)
      })
    }
  },
  // 计算属性
  computed: {}
}
</script>

<style scoped>
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
/*右边工具栏样式*/
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
@import "./custom/index.scss";
.containers {
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 52px);
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
}
</style>